<template>
  <div>
    <el-form ref="ruleForm" label-position="right" size="small" label-width="110px" class="base-search-more">
       <el-row>
        <el-col :span="6">
          <el-form-item label="区域">
            <agent-list style="width: 100%" :agentids="params.agentIds"
                        v-on:listenToChildEvent="getAentId"></agent-list>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动名称">
            <el-input style="width: 100%" placeholder="请输入活动名称" v-model="params.name" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="创建方">
            <el-select style="width: 100%" v-model="params.createtype" placeholder="选择活动状态" clearable>
              <el-option label="区域" value="1"></el-option>
              <el-option label="平台" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动审核">
            <el-select style="width: 100%" v-model="params.auditing" placeholder="选择审核状态" clearable>
              <el-option label="待审核" value="0"></el-option>
              <el-option label="审核通过" value="1"></el-option>
              <el-option label="审核未通过" value="-1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
         <el-col :span="24">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSizeChange(10)">查询</el-button>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <el-row type="flex" class="sub-nav">
      <span :class="{'cur':params.timeType =='3'}" @click="cheackTableType(3)">进行中</span>
      <span :class="{'cur':params.timeType =='2'}" @click="cheackTableType(2)">未开始</span>
      <span :class="{'cur':params.timeType =='4'}" @click="cheackTableType(4)">已结束</span>
      <span :class="{'cur':params.timeType =='5'}" @click="cheackTableType(5)">已下线</span>
    </el-row>
    <div class="base-table-wrap">
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column label="活动信息" min-width="200" align="left">
          <template slot-scope="scope">
            <div class="flex-row btween">
              <div class="flex-row" v-if="scope.row.ptype =='12'">
                <div class="act-img flex-row-ver" style="background:rgb(63, 185, 84)">代</div>
                <div class="act-title">
                  <div>区域红包</div>
                  <div v-if='scope.row.name !=""'>({{scope.row.name}})</div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="内容" min-width="300" align="left">
          <template slot-scope="scope">
            <div class="flex act-msg">
              <span class="title" style='width: 50px'>日期:</span>
              <span>
                <span v-html='$options.filters.catption4(scope.row.starttime,scope.row.endtime)'></span>
                <span v-show="scope.row.hasOwnProperty('worktoday')" v-html='$options.filters.catption1(scope.row.worktoday)'></span>
                <span v-show="scope.row.hasOwnProperty('firstTime')" v-html='$options.filters.catption2(scope.row.firstTime,scope.row.secondtime,scope.row.thridtime)'></span>
              </span>
            </div>
            <div class="flex act-msg">
              <span class="title" style='width: 50px'>规则:</span>
              <span v-if="scope.row.ptype =='12'">
                区域【{{scope.row.agentname}}】赠送{{scope.row.redusertype =='0'?'全部用户':scope.row.redusertype =='1'?'近'+scope.row.redday +'天未使用用户':scope.row.redlimittype=='2'?'随机用户':''}}{{scope.row.redamount|catpion3}}红包，消费满{{scope.row.fulls}}可使用（红包限{{scope.row.redlimittype=='0'?'每天限制':scope.row.redlimittype=='1'?'总数量':''}}{{scope.row.rednum}}个，{{scope.row.redpersonlimittype=='0'?'每人一张':scope.row.redpersonlimittype=='1'?'每人每天一张':''}}）
              </span>
            </div>
            <div class="flex act-msg">
              <span v-if="scope.row.ptype =='12'">区域【{{scope.row.agentname?scope.row.agentname:'未知区域'}}】</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="活动创建方" min-width="130" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createtype=='1'?'区域':scope.row.createtype=='2'?'平台':''}}</span><br/>
            <span>{{scope.row.createtype=='1'?`【${scope.row.agentname }】`:scope.row.createtype=='2'?'【后台管理】':''}}</span>
          </template>
        </el-table-column>
        <el-table-column label="同享" min-width="80" align="center">
          <template slot-scope="scope">
            {{scope.row.shared ?'同享':'不同享'}}
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="120" align="center">
          <template slot-scope="scope">
            <span style="color:#999;" v-if="scope.row.discard">已下线</span>
            <span v-else v-html="$options.filters.catption(scope.row.starttime,scope.row.endtime)"></span>
            <span v-if="scope.row.ptype=='12'">
              {{scope.row.auditing=='0'?'待审核':scope.row.auditing=='1'?'审核通过':scope.row.auditing=='-1'?'审核未通过':'未知审核'}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="170" align="right">
          <template slot-scope="scope">
            <el-button class="el-text-danger" type="text" v-if="scope.row.auditing > 0" @click="activitiesToAuditing(scope.row,0)">反审核</el-button>
            <span v-else>
               <el-button class="el-text-success" type="text"  v-if="scope.row.auditing <= 0" @click="activitiesToAuditing(scope.row,1)">审核通过</el-button>
               <el-button class="el-text-danger" type="text" v-if="scope.row.auditing <= 0" @click="activitiesToAuditing(scope.row,-1)">驳回审核</el-button>

             <!-- <el-button type="text" style="color:rgb(63, 185, 84)" @click="activitiesToAuditing(scope.row,1)">审核通过</el-button>
               <el-button type="text" style="color:red" @click="activitiesToAuditing(scope.row,-1)">驳回审核</el-button>-->
            </span>

          </template>
        </el-table-column>
      </el-table>
      <!-- 复制 el-table v-loading  v-loading无法快速响应 所有自定义 -->
      <div class="base-directives-loading" v-show="isloadingTable">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg>
        </div>
      </div>
      <div class="base-pagination clearfix">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="newPage" :pageSize="pageSize" :page-sizes="[10,20, 30]" background
                       layout="total,sizes, prev, pager, next, jumper" :total="tableData.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isloadingTable: false, //表单等待
        isdisabled: false, //默认区域城市不让下拉
        isCheacked: '1', //选择的表格类型
        params: { // 表格查询
          page: 0,
          size: 10,
          ptype: '12', // 活动裂隙
          name: '', // 活动名称
          timeType: '3', // 活动状态
          auditing:'',
          agentIds: [], // 区域
          createtype: '' // 活动
        },
        tableData: {}, // 表单数据
        newPage: 1, // 默认
        pageSize: 10, // 分页数量
      }
    },
    filters: {
      catption(s, e) {
        if (!s | !e) return ''
        let date = new Date().getTime()
        let start = new Date(s.replace(/-/g, "/")).getTime()
        let end = new Date(e.replace(/-/g, "/")).getTime()
        if (date < start) {
          return '<span style="color:#a6a6a6;">' + "未开始" + '</span>'
        } else {
          if (date < end) {
            return '<span style="color:#3eb99c;">' + "进行中" + '</span>'
          } else {
            return '<span style="color:#999;">' + "已过期" + '</span>'
          }
        }
      },
      catption1(dd) {
        let str = ''
        if (dd.length >0) {
          let arr = []
          dd.forEach((item, index) => {
            if (item == '1') arr.push('周一')
            if (item == '2') arr.push('周二')
            if (item == '3') arr.push('周三')
            if (item == '4') arr.push('周四')
            if (item == '5') arr.push('周五')
            if (item == '6') arr.push('周六')
            if (item == '7') arr.push('周日')
          })
          str += `<br />${arr.join('、')}`
        }else{
          str = ''
        }
        return str
      },
      catption2(t2, t3, t4) {
        let str = ''
        if (t2) {
          str += t2.split(',').join('-')
          if (t3) {
            str += '、' + t3.split(',').join('-')
          }
          if (t4) {
            str += '、' + t4.split(',').join('-')
          }
        } else {
          str += `全天`
        }
        return `<br />${str}`
      },
      catpion3(p) {
        if (!p) return ''
        if (p.indexOf(',') > -1) {
          return p.split(',').join('-') + comConfig.unit + '的随机'
        } else {
          return p + comConfig.unit
        }
      },
      catption4(st1,st2){
        if(st1&&st2){
          return `${st1.slice(0,10)}至${st2.slice(0,10)}`
        }else {
          return ''
        }
      }
    },
    methods: {
      getAentId(item) { //获取子组件传递的区域
        this.params.agentIds = item
      },
      activitiesToAuditing(row,auditing) { //活动审核
        this.isloadingTable = true
        this.$http.post('/server/activity/auditing', JSON.stringify({activityId: row.id,auditing})).then(res => {
          if (res.data.success) {
            this.$message.success('操作成功')
            if (this.tableData.list.length == '1') {
              this.handleSizeChange(10)
            } else {
              this.getTableList()
            }
          }
        }).finally(() => { this.isloadingTable = false })
      },
      cheackTableType(type){
        this.params.timeType = type
        this.handleSizeChange(10)
      },
      getTableList() { // 获取商户列表数据
        this.isloadingTable = true
        const params =  { ...this.params }
        params.agentIds = params.agentIds.length > 0 ? params.agentIds.join(',') : ''
        this.$http.get('/server/activity/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      },
      handleCurrentChange(page) { // 切换分页
        this.params.page = page - 1
        this.getTableList()
      },
      handleSizeChange(size) { // 切换条数
        this.params.size = size
        this.pageSize = size
        this.newPage = 1
        this.params.page = 0
        this.getTableList()
      }
    },
    mounted() {
      this.getTableList()
    }
  }
</script>
<style lang="scss" scoped>
  .act-img {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 2px;
    text-align: center;
    line-height: 32px;
    margin-right: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
  }
  .btween {
    justify-content: space-between;
    margin-right: 50px;
  }
  .act-title {
    font-weight: 600;
  }
  .act-msg .title {
    margin-right: 10px;
    font-weight: 600;
  }
  .sub-nav {
    padding: 10px 15px;
    background: #fff;

    span {
      width: 80px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      margin-left: 15px;
      cursor: pointer;
      color: #909399;
      border-bottom: 2px solid #fff;
      & .cur {
        color: $--color-primary;
        border-bottom: 2px solid $--color-primary;
      }
    }
  }
</style>
